<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/reset.css">
    <style>
        #app{
            width:500px;
            margin: 50px auto;
        }

        .box{
            width:1rem;
            height:1rem;
            border-radius: 1rem;
            border: 2px solid #666;
            display: inline-block;
        }
        .boxAdd{
            background-color: #714f52;
        }

        .ch-list{
            height:5rem;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>

<div id="app">

    <div>
        <div class="box" :class="{'boxAdd':checkAll}" @click="checkAllFun"></div>
        <span>全选</span>
    </div>

    <ul>
        <li class="ch-list" v-for="item in list">
            <div class="box" :class="{'boxAdd':item.checked}" @click="clickList(item)"></div>
            <span>{{item.name}}</span>
        </li>
    </ul>


</div>
</body>
<script>

    var _list = [
        {
            id:1,
            name:'小明',
            age:12
        },
        {
            id:2,
            name:'小李',
            age:11
        },
        {
            id:3,
            name:'小红',
            age:11
        }
    ]

    var app = new Vue({

        el:'#app',

        data:{

            checkAll:false,

            list : _list,

        },

        created:function(){


        },
        mounted:function(){

            /*this.list = this.list.map(function(val,index){

                val.checked = false;

                return val;
            })

            console.log(this.list)*/

        },
        methods:{
            clickList:function(item){

                if(typeof item.checked == 'undefined'){

                    this.$set(item,'checked',true)
                }else{

                    item.checked = !item.checked;
                }

                this.checkAll = this.list.every(function(val,index){

                    return val.checked;
                })

            },

            checkAllFun:function(){
                this.checkAll = !this.checkAll;

                let _this = this;

                this.list.forEach(function(item,index){

                    if(typeof item.checked == 'undefined'){

                        _this.$set(item,'checked',_this.checkAll)

                    }else{

                        item.checked = _this.checkAll;
                    }

                })

            }
        }

    })
</script>
</html>














